<script setup>
import { reactive } from "vue";
import { useStore } from "vuex";
import * as Cesium from "cesium";

import { onMounted } from "vue";
let store = useStore();

const emit = defineEmits(["boxShow"]);

let state = reactive({
  layerList: [
    {
      layerId: "cqlayer",
      layerIndex: 0,
      layer: null,
      layerUrl: "src/assets/data/vec/cqa.json",
      layerShow: false,
      layerName: "重庆市行政边界面数据",
    },
  ],

});
let cqalayer = null;

// 关闭弹窗
function closeBox() {
  emit("boxShow", "layerControl");
}

// 关闭图层显隐
function changeLayerShow(item, index) {
  console.log(item, index);
}

// 添加图层
function addLayer(item) {
  let url = item.layerUrl;
  Cesium.GeoJsonDataSource.load(url).then((dataSource) => {
    
  });
}
</script>

<template>
  <div class="box">
    <!-- 图层管理 -->
    <div class="box-content">
      <div class="box-title">
        图层管理
        <div class="close-btn-position close-btn" @click="closeBox">×</div>
      </div>
      <el-scrollbar class="box-body" height="37vh">
        <div
          v-for="(item, index) in state.layerList"
          :key="item.layerId + index"
        >
          <el-checkbox
            v-model="item.layerShow"
            :label="item.layerName"
            size="large"
            @change="changeLayerShow(item, index)"
          />
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<style scoped>
.box {
  width: 20vw;
  height: 45vh;
  background-color: rgba(26, 35, 57, 0.6);
}

.box-content {
  display: flex;
  flex-direction: column;
}

.box-title {
  position: relative;
  padding: 0.8vw;
  display: flex;
  align-items: center;
  height: 20px;
  color: #fff;
  user-select: none;
  background-color: rgba(58, 64, 79, 0.8);
}

.close-btn-position {
  position: absolute;
  right: 1vw;
  cursor: pointer;
}

.box-body {
  overflow: auto;
  padding: 0.5vw;
  color: #fff;
}
</style>

<style>
.box-body .el-checkbox__label {
  color: #fff;
}
</style>